<template>
  <div class="order-delivery-detail">
    <div class="alert-box">
      <el-form label-position="left" label-width="90px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="物流单号：">
              {{orderDetail.delivery.deliveryNumber}}
              <i
                @click="copyNumber(orderDetail.delivery.deliveryNumber)"
                class="iconfont icon-fuzhi"
              ></i>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="物流公司：">{{DELIVERY_CODE[orderDetail.delivery.companyCode]}}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="发货时间："
            >{{moment(orderDetail.delivery.createdAt).format('YYYY-MM-DD HH:mm:ss')}}</el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-timeline>
        <el-timeline-item
          v-for="(activity, index) in activities"
          :key="index"
          :color="index === 0 ? '#ff7800' : ''"
          :timestamp="moment(activity.timestamp).format('YYYY-MM-DD HH:mm:ss')"
        >
          <span :class="index === 0 ? 'current-step' : ''">{{activity.content}}</span>
        </el-timeline-item>
      </el-timeline>
    </div>
    <div class="btn-group">
      <!-- <el-button @click="close">取 消</el-button> -->
      <el-button type="primary" @click="close">确 定</el-button>
    </div>
  </div>
</template>

<script>
import moment from "moment";
export default {
  name: "order-delivery-detail",
  components: {},
  props: {
    orderId: {
      type: Number
    },
    oldStatus: {
      type: Number
    }
  },
  data() {
    return {
      moment: moment,
      DELIVERY_CODE: this.$common.DELIVERY_CODE,
      orderDetail: {
        delivery: {}
      },
      activities: [
        {
          content: "【上海市奉贤区南桥】 已发出 下一站 【浦东转运中心】",
          timestamp: "2018-04-11 20:2:11"
        },
        {
          content: "【上海市奉贤区南桥公司】 已打包",
          timestamp: "2018-04-13 08:18:51"
        },
        {
          content: "【上海市奉贤区南桥公司】 已收件",
          timestamp: "2018-04-15 15:20:11"
        }
      ]
    };
  },
  computed: {},
  watch: {},
  methods: {
    copyNumber(number) {
      let copyFlag = this.$utils.copyNumberId(number);
      if (copyFlag) {
        this.$message.success("复制快递单号成功");
      } else {
        this.$message.error("复制快递单号失败");
      }
    },
    submit() {},
    close() {
      // 关闭表单弹框
      this.$emit("close");
    },
    getOrderDetail() {
      this.$api.order.getOrderDetail({ orderId: this.orderId }).then(res => {
        this.orderDetail = res.data.orderDetail;
      });
    }
  },
  created() {
    this.getOrderDetail();
  }
};
</script>

<style lang="scss" scoped>
.order-delivery-detail {
  .alert-box {
    max-height: 350px;
    overflow-y: scroll;
    .icon-fuzhi {
      cursor: pointer;
      margin-left: 10px;
    }
    .current-step {
      color: #ff7800;
    }
  }
  .btn-group {
    text-align: center;
    margin-top: 30px;
  }
}
</style>